<template>
	<view class="index-home">
		<view class="flex-1 u-p-b-10">
			<router-link to="/pages/goods_search/goods_search">
				<u-search wrap-bg-color="transparent" bg-color="#fff" :disabled="true" :height="62">
				</u-search>
			</router-link>
		</view>
		<!-- 轮播 -->
		<ad-swipers :pid="7" height="312rpx" padding="0 30rpx" radius="20rpx"></ad-swipers>
		<!-- 资讯 -->
		<router-link v-if="newsList.length" class="" :to="{ path: '/pages/news_list/news_list' }">
			<view class="information flex m-t-20 u-m-l-40 u-m-r-40">
				<image class="icon-toutiao" style="width: 32px;height: 18px;" mode="widthFix"
					src="https://shop.lanbaozixun.com/uploads/images/20250922/20250922193823b0aee7676.png"></image>
				<text class="gap-line"></text>
				<view class="news flex-1 flex">
					<view class="shade"></view>
					<swiper class="flex-1" autoplay="true" style="height: 76rpx" vertical="true" circular="true"
						:interval="3000">
						<swiper-item v-for="(item, index) in newsList" :key="index" class="flex">
							<view class="flex-none">
								<u-tag v-if="item.is_new" shape="circle" text="最新" size="mini" type="primary"
									mode="plain" />
							</view>
							<view class="text-swiper m-l-10 line-1">{{ item.title }}</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</router-link>
		<bubble-tips top="280rpx" :discharge="isDischarge"></bubble-tips>
		<view v-if="recommendProduct.length > 0" class="recommend-product-area m-t-20 u-m-l-30 u-m-r-30">
			<view class="u-flex u-row-between u-p-l-30 u-p-r-30">
				<view class="u-flex">
					<image class="text-title"
						src="https://shop.lanbaozixun.com/uploads/images/20250922/20250922200015a48506375.png"
						mode="widthFix"></image>
					<image class="text-title-icon"
						src="https://shop.lanbaozixun.com/uploads/images/20250922/2025092220001596f860037.png"
						mode="widthFix"></image>
				</view>

				<navigator hover-class="none" class="move-btn" url="/pages/active_list/active_list">
					查看更多
				</navigator>
			</view>
			<swiper style="height: 175px; padding: 0 10rpx;" autoplay circular disable-touch :display-multiple-items="3" :duration="2200" easing-function="linear" :indicator-dots="false" :interval="3000" next-margin="10px">
				<swiper-item class="u-p-t-30" v-for="(v,k) in recommendProduct" :key="k" bg-color="transparent">
					<navigator hover-class="none" :url="`/pages/goods_details/goods_details?id=${v.id}`" style="padding: 0 0 0 20rpx;">
						<image style="height: 100px;width: 100px;border-radius: 10rpx;" :src="v.image" mode="scaleToFill"></image>
						<view class="u-line-1 u-m-t-5" style="width: 100px;">{{v.name || ''}}</view>
						<view class="u-flex u-row-between u-m-t-10" style="width: 100%;">
							<view v-if="v.distribution.is_show == 1" class="u-flex" style="color: #F73131;align-items: baseline;">
								<view style="font-size: 11px;">赚¥</view>
								<view style="font-size: 16px;">{{v.distribution.earnings || 0}}</view>
							</view>
					<!-- 		<navigator hover-class="none" :url="`/pages/goods_details/goods_details?id=${v.id}`" class="share-btn">
								去分享
							</navigator> -->
						</view>
					</navigator>
				</swiper-item>
			</swiper>
		</view>
		<view class="content">
			<!-- 导航入口 -->
			<view class="nav m-t-20" v-if="newNavList.length">
				<swiper :style="'height:' + navSwiperH + 'rpx;'" @change="swiperChange">
					<swiper-item v-for="(items, index) in newNavList" :key="index">
						<view class="nav-list flex flex-wrap">
							<view v-for="(item, index2) in items" :key="index2" class="nav-item m-t-30"
								@tap="menuJump(item)">
								<view class="flex-col col-center">
									<image class="nav-icon m-b-15" :src="item.image"></image>
									<view class="name xs">{{ item.name }}</view>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
				<view class="dots" v-if="newNavList.length > 1">
					<view v-for="(item, index) in newNavList" :key="index"
						:class="'dot ' + (index == currentSwiper ? 'active' : '')"></view>
				</view>
			</view>
			<!-- 轮播 -->
			<ad-swipers @showVideo="showVideo" :pid="8" height="200rpx" padding="0 0" radius="20rpx"></ad-swipers>
			<goods-list type="hot" :list="productLists"></goods-list>
			<u-popup v-model="showPop" mode="center">
				<view class="pop-container">
					<view class="header-score flex row-center">+{{signInfo.integral}}</view>
					<view class="box column-center">
						<view class="xl u-text-center white">恭喜您获得</view>
						<view class="desc m-t-20 xl flex row-center">
							<view class="">
								获得
							</view>
							<image style="width: 28rpx; height: 30rpx;margin-right: 8rpx; margin-left: 8rpx"
								src="/static/images/icon_jifen.png"></image>
							<view class="">
								{{signInfo.integral}}积分
							</view>
						</view>
						<view class="u-flex u-row-between u-p-l-20 u-p-r-20" style="padding-top: 90rpx;">
							<view class="white br60 primary-btn " @tap="showPop = false">关闭</view>
							<navigator url="/bundle/pages/integral_mall/integral_mall" hover-class="none" class="white br60 primary-btn-tow" @tap="showPop = false">兑换产品</navigator>
						</view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import {
		awardingRewards
	} from '@/api/app';
	import {
		getGoodsListColumn,
		getGoodsColumn
	} from "@/api/store"
	import {
		arraySlice,
		menuJump
	} from '@/utils/tools'
	import {
		mapGetters
	} from 'vuex'
	export default {
		props: {
			navList: {
				type: Array,
				default: () => []
			},
			list: {
				type: Array,
				default: () => []
			},
			homeData: {
				type: Object,
				default: () => ({})
			},
			liveList: {
				type: Array,
				default: () => []
			},
			productLists: {
				type: Array,
				default: () => []
			},
		},
		data() {
			return {
				videoAd:null,
				newNavList: [],
				navSwiperH: '',
				currentSwiper: 0,
				isDischarge: false,
				recommendProduct:[],
				showPop: false,
				signInfo:{ integral:0}
			}
		},
		mounted() {
			var _this = this;
			_this.isDischarge = false
			if (wx.createRewardedVideoAd && _this.videoAd == null) {
				_this.videoAd = wx.createRewardedVideoAd({
					adUnitId: 'adunit-91766432b3b6b2a6'
				})
				_this.videoAd.onLoad(() => {})
				_this.videoAd.onError((err) => {
					console.error('激励视频光告加载失败', err)
				})
				_this.videoAd.onClose((res) => {
					// 用户点击了【关闭广告】按钮
					if (res && res.isEnded) {
						awardingRewards().then(res => {
							_this.signInfo.integral = res.data.integral
							_this.showPop = true
						})
					}
				})
			}
		},
		destroyed() {
			this.isDischarge = true
		},
		methods: {
			showVideo(){
				const _this = this;
				_this.videoAd.show().catch(() => {
					// 失败重试
					_this.videoAd.load()
						.then(() => videoAd.show())
						.catch(err => {
							console.error('激励视频 广告显示失败', err)
						})
				})
			},
			swiperChange(e) {
				console.log(e)
				this.currentSwiper = e.detail.current
			},
			menuJump(item) {
				menuJump(item)
			},
			getData(){
				var _this = this;
				_this.recommendProduct = []
				const shopInfo = uni.getStorageSync('selectStoreInfo')
				getGoodsListColumn({
					page_size: 15,
					page_no: 1,
					column_id: 1,
					shop_id:shopInfo.id
				}).then(({
					data
				}) => {
					_this.recommendProduct = _this.recommendProduct.concat(data.lists);
				})
			}
		},
		watch: {
			navList(val) {
				if (val.length <= 5) {
					this.navSwiperH = 200
				} else {
					this.navSwiperH = 374
				}
				this.newNavList = arraySlice(val)
			},
			list(val) {
				this.goodsList = val
			}
		},
		computed: {
			...mapGetters(['appConfig']),
			newsList() {
				return this.homeData.headlines || []
			},
			nearbyShop() {
				return this.homeData.nearby_shops || []
			},
			hotGoods() {
				return this.homeData.hots || []
			},
			newGoods() {
				return this.homeData.news || []
			},
			communityArticle() {
				return this.homeData.community_article || []
			},
			activityList() {
				return this.homeData.activity_area || []
			},
			shopRecommend() {
				return this.homeData.shop_recommend || []
			},
			shopLists() {
				return this.homeData.shop_lists || []
			},
			seckillGoods() {
				return this.homeData.seckill_goods || []
			},
			activityArea() {
				return this.homeData.activity_area || []
			}
		}
	}
</script>

<style lang="scss">
	.recommend-product-area {
		padding: 20rpx 0;
		border-radius: 10px;
		background: linear-gradient(180deg, #FFE1E0 0.02%, #FFFFFF 100%);

		.text-title {
			width: 67px;
			height: 23px;

			&-icon {
				width: 19px;
				height: 16px;
				margin-left: 10rpx;
			}
		}

		.move-btn {
			color: white;
			font-size: 11px;
			padding: 10rpx 20rpx;
			overflow: hidden;
			border-radius: 20px 20px 20px 0px;
			background: linear-gradient(90deg, #E35757 0%, #D43422 100%);
		}
		
		.share-btn{
			padding: 5px 10px;
			color: white;
			font-size: 10px;
			border-radius: 100px;
			background: linear-gradient(90deg, #E35757 0%, #D43422 100%);
		}
	}

	.index-home {
		.content {
			padding: 0 30rpx 20rpx;

			.nav {
				position: relative;
				border-radius: 20rpx;

				.nav-item {
					width: 20%;

					.nav-icon {
						width: 82rpx;
						height: 82rpx;
					}
				}

				.dots {
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					bottom: 20rpx;
					display: flex;

					.dot {
						width: 10rpx;
						height: 6rpx;
						border-radius: 6rpx;
						margin-right: 10rpx;
						background-color: rgba(255, 44, 60, 0.4);

						&.active {
							width: 20rpx;
							background-color: $-color-primary;
						}
					}
				}
			}

			.information {
				height: 76rpx;
				box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.06);
				padding: 0 20rpx;
				border-radius: 20rpx;

				.news {
					position: relative;

					.shade {
						position: absolute;
						width: 100%;
						height: 100%;
						z-index: 100;
					}
				}

				.icon-toutiao {}

				.gap-line {
					height: 28rpx;
					width: 1px;
					background-color: #dcdddc;
					margin: 0 30rpx;
				}
			}



			.title-iamge {
				width: 200rpx;
				height: 100rpx;
			}

			.activity-zone {
				background-image: url();
				background-size: 100% auto;
				padding: 0 15rpx;
				border-radius: 14rpx;

				.item {
					border-radius: 14rpx;
					width: 324rpx;
					padding: 20rpx 16rpx;

					.desc {
						width: 160rpx;
					}

					.btn {
						display: inline-block;
						padding: 2rpx 20rpx;
					}
				}
			}

			.live {
				background: linear-gradient(180deg,
						rgba(255, 233, 233, 1) 0%,
						rgba(255, 255, 255, 1) 74%);
				padding-bottom: 28rpx;
				border-radius: 14rpx;

				.live-header {
					padding: 28rpx 24rpx;
				}
			}
		}
	}
	
	.pop-container {
		background-repeat: no-repeat;
		background-size: 100%;
		height: 626rpx;
		width: 560rpx;
		position: relative;
		background-image: url('https://shop.lanbaozixun.com/uploads/images/20251008/20251008233418e96db5971.png');
	}
	
	.header-score {
		font-size: 46rpx;
		line-height: 36rpx;
		font-weight: bold;
		padding-top: 90rpx;
		padding-bottom: 120rpx;
		// color: #FF2C3C;
		color: #FF8412;
	}
	
	.desc {
		color: white;
		background: linear-gradient(82deg, rgba(250, 81, 50, 1) 0%, rgba(236, 60, 34, 1) 49%, rgba(250, 83, 50, 1) 100%);
		padding: 16rpx 22rpx 16rpx 42rpx;
		text-align: center;
	}
	.primary-btn {
		width: 40vw;
		line-height: 74rpx;
		border-radius: 37rpx;
		text-align: center;
		margin-right: 20rpx;
		background: linear-gradient(#f95f2f 0%, #ff2c3c 100%);
	}
	
	.primary-btn-tow {
		width: 40vw;
		line-height: 74rpx;
		border-radius: 37rpx;
		text-align: center;
		color: #f95f2f;
		margin-left: 20rpx;
		border: 1px solid #f95f2f;
	}
</style>